import React, { Component } from 'react'
import axios from "axios"
import "./index.scss"
import Gift from './img/gift.png'
import Vip from './img/two-member.png'
import { SideBar } from 'antd-mobile'

export default class Category extends Component {
    constructor() {
        super()
        this.state = ({
            thingList: [],
            navList: [],
            activeKey: "312",
            sortTypes: {
                //升序
                up: {
                    class: "sort-up",
                    fn: (a, b) => a.template.retailPrice - b.template.retailPrice,
                },
                //降序
                down: {
                    class: "sort-down",
                    fn: (a, b) => b.template.retailPrice - a.template.retailPrice,
                },
                //默认不排序
                default: {
                    class: "sort",
                    fn: (a, b) => a,
                },
            },
            // 当前排序
            currentSort: "default",

        })
    }

    async componentDidMount() {
        // var res = await axios.post("https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/commoditiesByCategory", { "ceoStatus": 0, "catKey": this.state.activeKey, "page": 1, "pageSize": 1000, "channelId": null, "memberKey": "" })
        var res1 = await axios.post("https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/categoryList", { "isWholeSale": 0, "channelId": null })

        console.log(res1.data.data.categoryInfo);

        this.setState({
            // thingList: res.data.data.commodityInfo,
            navList: res1.data.data.categoryInfo
        })
        this.getCateData();

    }
    getCateData = () => {
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/categoryApi/commoditiesByCategory', { "ceoStatus": 0, "catKey": this.state.activeKey, "page": 1, "pageSize": 1000, "channelId": null, "memberKey": "" }
        ).then(res => {
            console.log(res);
            this.setState({ thingList: res.data.data.commodityInfo })
        })
    }
    setActiveKey = (value) => {
        console.log("左侧菜单点击了", value);
        //将 value的值赋值给 state
        this.setState({
            activeKey: value
        }, () => { this.getCateData() }
        )
    }
    onSortChange = () => {
        const { currentSort } = this.state;
        let nextSort;
        //排序方式的切换
        if (currentSort === "down") nextSort = "up";
        else if (currentSort === "up") nextSort = "default";
        else if (currentSort === "default") nextSort = "down";
        //修改当前排序方式
        this.setState({
            currentSort: nextSort,
        });
    }
    render() {
        let { thingList, navList, activeKey } = this.state

        return (
            < div className='box' >
                <div className='box_left' >

                    <SideBar activeKey={activeKey} onChange={this.setActiveKey}>
                        {navList.map(item => (
                            <SideBar.Item key={item.code} title={item.displayName} >{item.displayName}</SideBar.Item>
                        ))}
                    </SideBar>
                </div >

                <div className='box_right'>
                    <div style={{

                    }} onClick={() => this.onSortChange()} className={this.state.sortTypes[this.state.currentSort].class}>
                        <p>价格</p>
                    </div>
                    <ul>
                        {
                            thingList.sort(this.state.sortTypes[this.state.currentSort].fn)
                                .map(item => <li key={item.key} className='con'>
                                    <div className="picture">
                                        <img alt="es-lint want to get" src={item.template.listImages}></img>
                                    </div>
                                    <div className='con_right'>
                                        <div>
                                            <p className='text'>{item.name}</p>
                                            <p className='text_2'>{item.template.displayName}</p>
                                        </div>
                                        <img src={Gift} alt="es-lint want to get" className='img_1' />
                                        <div>
                                            <span className='price1'>￥{item.template.origPrice}</span>
                                            <span className='price2'>￥{item.template.supplyPrice}</span>
                                            <img src={Vip} alt="es-lint want to get" className='img_2' />
                                        </div>
                                    </div>
                                </li>)
                        }
                    </ul>
                </div>
            </div >
        )
    }
}
